<template>
	<view class="submit page bgf5">
		<scroll-view scroll-y class="list bgf6 boxS">
			<view class="py6"></view>
			<view class="flex">
				<view class="flex1">
					<view class="right1 bgff shadow box fs14 r10 px14 mx10 c3d3">
						<view class="py7">门店:{{data.shop_name}}</view>
						<view class="py7">包间:{{data.name}}</view>
						<view class="py7">状态:
							<text class="r4 px8 py3 fs12 bold4 status" v-if="data.status == 'free'">空闲中</text>
							<text class="r4 px8 py3 fs12 bold4 status" v-else>使用中</text>
						</view>
					</view>
				</view>

				<view class="flex2">
					<view class="right2 bgff shadow r10 box mr10" @click="mtClick">
						<view class="cont px14 pt16 pb10 boxS flex flexB flexCol">
							<view class="flex flexS">
								<image class="icon mr4" src="../static/icon/mt2.png" mode="aspectFill" />
								<image class="icon mr4" src="../static/icon/dou.png" mode="aspectFill" />
								<image class="icon" src="../static/icon/ks.png" mode="aspectFill" />
							</view>
							<view class="pl5 bottom2">
								<view class="fs14 c3d3">团购验券</view>
								<view class="fs10 c95 mt4">美团/抖音/快手</view>
							</view>
							<image class="logo" src="../static/icon/logo.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>


			<view class="bgff r10 room mx10 my12 shadow">
				<scroll-view scroll-x class="" show-scrollbar="false">
					<view class="px10 pt12 fs12 nowrap">
						<view v-for="(item, index) in data.date" :key="index" @click="doSelectDate(item)"
							class="aliC r4 w40 px4 py1 mr8 flex flexCol flexC"
							:class="item.selected == true? 'active' : ''">
							<view class="">{{item.date}}</view>
							<view class="">{{item.week}}</view>
						</view>

					</view>
				</scroll-view>
				<!-- 按小时 -->
				<view v-if="currentTab == 0" class="pb10 px12">
					<view class="flex flexS">
						<text class="bold6 pt6">时长选择：</text>
						<view class="flex1 flex flexC flexW">
							<view v-for="(item, index) in data.hours" :key="index" @click="doSelectHour(index)"
								class="aliC r2 w-25 py5 boxS mx3 mb6 flex flexCol flexC"
								:class="selectHourIndex  == index ? 'bor57' : 'bor c99'">
								{{item}}小时
							</view>

							<view @click="doSelectHour(-1)" class="aliC r2 w-25 py5 boxS mx3 mb6 flex flexCol flexC"
								:class="selectHourIndex  == -1 ? 'bor57' : 'bor c99'">

								<picker mode="multiSelector" :range="array1" @change="pickSelect" :value='value'>
									<view>其它</view>
								</picker>
							</view>
						</view>
					</view>

					<view class="flex flexC fs18 bold6 py8">
						<text class="fs14">时间选择：</text>
						<view class="flex1 flex flexJC flexE borf6 bgff r40 px16 py4">
							<picker mode="time" :value="data.startTime" @change="bindTimeChange">
								<text>{{data.startTime}}</text>
							</picker>

							<image class="w12 ml6 mb5" src="/static/img/icon/edit_sel.png" mode="aspectFill"></image>
						</view>
						<text class="fs14 px14 aliC">到</text>
						<view class="flex1 flex flexJC flexE bor bgff r40 px16 c85 py4">
							<text>{{data.endTime}}</text>
						</view>
					</view>
				</view>

				<!-- 按套餐 -->
				<view v-else-if="currentTab == 1" class="c3d3">
					<view class="flex flexC fs18 bold6 p12">
						<text class="fs14 c66">时间选择：</text>
						<view class="flex1 flex flexJC flexE borf6 r40 px16 py4">
							<picker mode="time" :value="data.startTime" @change="bindTimeChange">
								<text>{{data.startTime}}</text>
							</picker>
							<image class="w12 ml6 mb5" src="/static/img/icon/edit_sel.png" mode="aspectFill"></image>
						</view>
						<text class="fs14 px14 aliC fs14 c66">到</text>
						<view class="flex1 flex flexJC flexE bor bgff r40 px16 cb5 py4">
							<text>{{data.endTime}}</text>
							<image class="w12 ml6 mb5" src="/static/img/icon/edit_nor.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="mb14 px8">
						<view class="flex flexC">
							<text v-for="(item,index) in oneTimeList" :key="index" class="bgc3 r2 hour_w boxS"
								:class="item.isBook  ? 'lines' :item.isSelect ==true && item.isHalf == false? 'lines3' : item.isHalf == true  ? 'lines2' : ''">
							</text>
						</view>
						<view class="flex flexS fs10">
							<view v-for="(item,index) in oneTimeList" :key="index" class="hour_w boxS">
								<text>{{item.hour}}</text>
							</view>
						</view>
						<view class="flex flexC mt20">
							<text class="bgfd px5 py3 r2"></text>
							<text class="cfd fs12 ml5 mr14">已预定</text>
							<text class="bgc3 px5 py3 r2"></text>
							<text class="c00 fs12 ml5 mr14">可预定</text>
							<text class="bg56 px5 py3 r2"></text>
							<text class="ce0 fs12 ml5">已选择</text>
						</view>
					</view>
					<view class="">
						<view class="fs15 pb7 px9 c00">套餐选择</view>
						<view class="listbox mx8 pb4 flex flexC flexW">
							<view v-for="(item, index) in data.set" :key="index" @click="doSetSelect(index)"
								class="item mx4 px12 py4 r12 shadow boxS mb8"
								:class="index == selectSetIndex ? 'active' : ''">
								<view class="flex flexC fs16">{{item.name}}</view>
								<view class="fs10 mt4 c890" v-if="item.time !='' ">
									<view>使用时间段:{{item.time}}-{{item.end_time}}</view>
									<view v-if="item.is_week == 1">使用日期：周六~周日</view>
								</view>
								<view class="fs10 mt4 c890" v-else>
									<view>使用时间段:无限制 </view>
									<!-- <view class="" v-if="item.is_week == 0">使用日期：周一~周日</view> -->
									<!-- <view class="" v-else-if="item.is_week == 1">使用日期：周一~周五</view> -->
									<!-- <view class="" v-else-if="item.is_week == 2">使用日期：周六~周日</view> -->
								</view>
								<view class="mt8 cfd2">
									<view class="cfd" style="flex: 1;">
										<text class="fs12">￥</text>
										<text class="fs18 bold6">{{item.amount}}</text>
									</view>
									
									<view style="color: #adadad;">
										<text class="fs12">￥</text>

										<text v-if="item.original_amount == null || item.original_amount == ''" class="fs15 bold" style="text-decoration: line-through;">{{item.amount*1.5.toFixed(2)}}</text>
										<text v-else class="fs15 bold" style="text-decoration: line-through;">{{item.original_amount}}</text>
									</view>
									
								</view>
							</view>
						</view>
						
						<view class="fs15 pb7 px9 c00上" v-if="data.yh_set.length >0">优惠套餐</view>
						<view class="listbox mx8 pb4 flex flexC flexW" v-if="data.yh_set.length >0">
							<view v-for="(item, index) in data.yh_set" :key="index" @click="doSetSelect2(index)"
								class="item mx4 px12 py4 r12 shadow boxS mb8"
								:class="index == yhSelectSetIndex ? 'active' : ''">
								<view class="flex flexC fs16">{{item.name}}</view>
								<view class="fs10 mt4 c890">
									<view>使用时间段:{{item.time}}-{{item.end_time}}</view>
									<!-- <view v-if="item.is_week == 1">使用日期：周六~周日</view> -->
								</view>
								<!-- <view class="fs10 mt4 c890" v-else>
									<view>使用时间段:无限制 </view>
									<view class="" v-if="item.is_week == 0">使用日期：周一~周日</view>
									<view class="" v-else-if="item.is_week == 1">使用日期：周一~周五</view>
									<view class="" v-else-if="item.is_week == 2">使用日期：周六~周日</view>
								</view> -->

								<view class="mt8 cfd2">
									<view class="cfd" style="flex: 1;">
										<text class="fs12">￥</text>
										<text class="fs18 bold6">{{item.amount}}</text>
									</view>
									
									<view style="color: #adadad;">
										<text class="fs12">￥</text>
										<text v-if="item.original_amount == null || item.original_amount == ''" class="fs15 bold" style="text-decoration: line-through;">{{item.amount*1.5}}</text>
										<text v-else class="fs15 bold" style="text-decoration: line-through;">{{item.original_amount}}</text>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="bgff r10 room shadow mb14 pb14 px14 fs14 mx10">
				<view class="flex flexC flexB fs16 borb pt16 pb12">
					<text class="bold6">订单总价</text>
					<text class="cfd bold6">￥{{data.total_price}}</text>
				</view>
				<view class="flex flexC flexB pt12">
					<text>预约时长</text>
					<text>{{data.book_hour}}小时</text>
				</view>
				<view class="flex flexC flexB pt10">
					<text>续单</text>
					<text>{{data.book_price}}元/小时</text>
				</view>
					<view class="flex flexC flexB pt12">
					<text>用户手机号</text>
					<input class="fs13" v-model="mobile" placeholder="请输入代客户预定的手机号"/>
				</view>

		
				<view class="flex flexC pt14" v-if="mtCode != ''">
					<image class="w20" src="/static/img/icon/youhui.png" mode="aspectFill"></image>
					<text class="flex1 pl10">美团券</text>
					<view class="bgac r40 c57 flex flexC px10 py2">
						<text class="fs12 mr5">券码{{mtCode}}</text>
						<image class="w5" src="/static/img/icon/right_sel.png" mode="widthFix"></image>
					</view>
				</view>


				<view class="flex flexC pt14" v-if="douCode != ''">
					<image class="w20" src="/static/img/icon/youhui.png" mode="aspectFill"></image>
					<text class="flex1 pl10">抖音券</text>
					<view class="bgac r40 c57 flex flexC px10 py2">
						<text class="fs12 mr5">{{douCode}}</text>
						<image class="w5" src="/static/img/icon/right_sel.png" mode="widthFix"></image>
					</view>
				</view>
			
			</view>
		</scroll-view>
		<view class="fixed bgf5 px14 pb20 pt10" >
			<view class="flex flexC content">
				<view class="flex1 fs12 c00 pl16 pr10">
					<view class="">
						<text class="bold6">总计：</text>
						<text class="cfd fs10">￥</text>
						<text class="cfd fs16 bold6">{{data.pay_price}}</text>
					</view>
					<view class="">
						<text>共{{data.book_hour}}小时</text>
					</view>
				</view>
				<!-- <view class="btn1 cff flex flexC flexCol flexJC px6" @click="$refs.chargePop.open()">
					<view class="fs16 bold6">余额充值</view>
					<view class="fs12">（享优惠）</view>
				</view> -->
				<view @click="sureSubmit" class="btn px10 fs16 c00">代下单</view>
			</view>
		</view>
		
		<uni-popup ref="chargePop" type="center" :mask-click="false">
			<view class="popup2">
				<image class="bg" src="https://resouce.51fxyf.com/pop_bg.png" mode="aspectFill"></image>
				<view class="cont aliC py10">
					<view class="title fs22 bold6 mt30">超值会员充值</view>
<!-- 					<view class="sub fs18 bold6 mt5">最高可以省1000元</view -->
					<scroll-view scroll-y class="listPop mt8 px18 boxS" >
						<view v-for="(item,index) in chargeList" :key="index" @click="clickChargeItem(item,index)">
							<view class="item r6 py6 bold8 mb6 fs15" :style="{color: item.check ? '#E40082' : '#FFF'}">
								充<text :class="item.check ? 'bold6 px2 fs20' : 'px2 fs20'">{{item.amount}}</text>
								得<text :class="item.check ? 'bold6 px2 fs20' : 'px2 fs20'">{{item.get_amount}}</text>
							</view>
						</view>
					</scroll-view>
					<view class="btn aliC mt10 flex flexC flexJC " @click="doVipCharge">
						<button class="r40 fs18">立即充值</button>
					</view>
				</view>
				<view class="aliC mt20" @click="$refs.chargePop.close()">
					<text class="close boxS r50 cff fs28">×</text>
				</view>
			</view>
		</uni-popup>
		

		<uni-popup ref="phonePicker" type="bottom">
			<button open-type="getPhoneNumber" class="bglineEb fs16 py4 btn bg57"
				@getphonenumber="getPhone">完善手机号下单</button>
		</uni-popup>

		<uni-popup ref="couponPicker" type="bottom">
			<select-coupon @clickUseCoupon="clickUseCoupon" :list="tuanList" ref="selectCoupon"></select-coupon>
		</uni-popup>

		<uni-popup ref="yhPicker" type="bottom">
			<yh-coupon @clickUseCoupon="clickUseCoupon2" :list="discount" ref="yhCoupon"></yh-coupon>
		</uni-popup>
		<uni-popup ref="rechargePicker" type="bottom" :safeArea="false">
			<view class="aliC cover">
				<image class="r50" src="/static/logo.jpg" mode="aspectFill"></image>
				<text class="fs26 close" @click="$refs.rechargePicker.close()">×</text>
			</view>
			<scroll-view class="bgf5 pt26" scroll-y style="height: 85vh;">
				<view class="confirmPopup bgff pb16 mx5 shadow flex flexCol r12 px12">
					<view class="fs18 bold6 borb pt18 pb12 mb12 aliC">预约信息确认</view>
					<view class="flex flexC w-20 borb pb14">
						<image class="poster mr10 r8" src="/static/logo.jpg" mode="aspectFill"></image>
						<view class="flex1 c99">
							<view class="mb4">预约门店:【{{data.shop_name}}】</view>
							<view class="mb4">预约包间: {{data.name}}</view>
							<view class="mb4">开始时间:{{data.start}}</view>
							<view class="">结束时间:{{data.end}}</view>
						</view>
					</view>

					<view class="cff0 fs16 pt12 pb6 bold6">客户须知:</view>
					<view class="cff0 my4">1、预定的订单将全时段保留,迟到不可顺延和退款</view>
					<view class="cff0 my4">2、若订单时段前包厢无使用,可提前开始订单,但订单总时长不变</view>
					<view class="cff0 my4">3、订单开始前1小时内取消订单需核收15%退单费,请合理规划您的时间</view>

				</view>
				<view class="bgff rechargePopup pb30 mt12 mx5 shadow" v-if="chargeList.length >0">
					<view class="aliC pl31 flex flexC py19">
						<text class="flex1 fs18 bold6">会员充值 更划算</text>
					</view>
					<view class="flex flexC cont flexW px9">
						<view @click="clickChargeSelect(index)" v-for="(item,index) in chargeList" :key="index"
							class="item boxS r7 mt10 p7 mx2 flex flexJC flexCol aliC">
							<view class="">充值</view>
							<view class="bold6 fs14">￥{{item.amount}}</view>
							<view class="fs12 bgff4 r3">赠送￥{{item.get_amount-item.amount}}</view>
							<view class="aliR mt5 radio">
								<radio :checked="false" style="transform: scale(.7);" color="#fff" />
								<image v-if="selectChargeIndex == index" class="" src="/static/img/icon/checked.png"
									mode="aspectFill">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 190rpx;"></view>
			</scroll-view>
			<view class="fixed bgff px14 pb20 pt10" v-if="data != null">
				<view class="flex flexC content">
					<view class="flex1 fs12 c00 pl16 pr10 py4">
						<view class="">
							<text class="bold6">总计：</text>
							<text class="cfd fs10">￥</text>
							<text class="cfd fs18 bold6">{{data.pay_price}}</text>
						</view>
						<view class="">
							<text>共{{data.book_hour}}小时</text>
						</view>
					</view>
					<view class="btn1 flex flexC flexCol flexJC px14 py4">
						<view class="fs16 bold6">余额充值</view>
						<view class="fs12">（享优惠）</view>
					</view>
					<view @click="goBook()" class="btn px14 py4 fs16 c00">马上预约</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup type="center" ref="confirmPopup">
			<view class="confirmPopup bgff pb40 flex flexCol r12 px12">
				<view class="aliC cover">
					<image class="r50" src="/static/logo.jpg" mode="aspectFill"></image>
				</view>
				<view class="fs18 bold6 py8 mb12 borb aliC">预约信息确认</view>
				<view class="c99 my4">预约门店:【{{data.shop_name}}】</view>
				<view class="c99 my4">预约包间: {{data.name}}</view>
				<view class="c99 my4">开始时间:{{data.start}}</view>
				<view class="c99 my4 pb16 borb">结束时间:{{data.end}}</view>
				<view class="cff0 fs16 pt12 pb6 bold6">客户须知:</view>
				<view class="cff0 my4">1、预定的订单将全时段保留,迟到不可顺延和退款</view>
				<view class="cff0 my4">2、若订单时段前包厢无使用,可提前开始订单,但订单总时长不变</view>
				<view class="cff0 my4">3、订单开始前1小时内取消订单需核收15%退单费,请合理规划您的时间</view>
				<view class="flex flexC btns mt20">
					<view class="cancelbtn r40 fs16 mx12" @click="$refs.confirmPopup.close()">返回修改</view>
					<view class="confirmbtn r40 fs16 cff mx12" @click="firstBook()">立即预定</view>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['小时模式', '套餐模式'],
				currentTab: 1,
				param: null,
				data: null,
				selectHourIndex: -1,
				hour: '',
				date: '',
				startTime: '',
				selectSetIndex: 0,
				setId: -1,
				order_no: '',
				shop_id: '',
				tuanList: [],
				tuanId: -1,
				selectTuanName: '',
				startDate: '',
				oneTimeList: [],
				twoTimeList: [],
				oneDate: '',
				twoDate: '',
				mtCode: '',
				isFirst: true,
				douCode: '',
				couponList: [],
				selectCouponName: '',
				couponId: -1,
				isPaying: false,
				chargeList: [],
				selectChargeIndex: -1,
				chargeId: -1,
				code: '',
				discount: "",
				selectChargeIndex2: 0,
				yhSelectSetIndex:-1,
				discount_id: '',
				discount:'',
				isShowCharge:true,
				discount_name:'',
				id:'',
				mobile:''

			};
		},
		onLoad(option) {

			this.id = option.id;
		
			console.info("=======id========="+this.id);
			
		},

		onShow() {
			this.init();		
		},

		methods: {
			
			doVipCharge() {
				this.$refs.chargePop.close();
				if (this.chargeList.length == 0) return;
				let param = {
					charge_id: this.chargeList[this.selectChargeIndex2].id,
				};
				let that = this;
				this.$api.charge(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
			
						that.chargePay(res.data.payInfo)
			
					} else {
			
					}
				})
			},
			
			chargePay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
			
						
					},
					fail: function(err) {
						uni.showToast({
							title: "取消充值",
							icon: 'none'
						});
					}
				});
			},
			
			clickChargeItem(item, index) {

			
				item.check = !item.check;
				this.selectChargeIndex2 = index;
				for(var i=0;i<this.chargeList.length;i++){
					this.chargeList[i].check = false;
				}
				for(var i=0;i<this.chargeList.length;i++){
					if(item.id == this.chargeList[i].id){
						this.chargeList[i].check = true;
					}
				}
				this.$forceUpdate();
			},

			sureSubmit() {
				
			
				if(this.mobile == ''){
					uni.showToast({
						title:"请输入客户的手机号",
						icon:'none'
					})
					return;
				}
				this.addBook();
			},

			mtClick() {
				
				this.isShowCharge = false;
			
				let that = this;
				uni.scanCode({
					success: function(res) {
						console.log('==================>>条码类型：' + res.scanType);
						console.log('===================>>条码内容：' + res.result);
						that.code = res.result;

						if (that.code.length <= 13 ) {
							that.mtCode = that.code;
							let param = {
								code: that.mtCode,
								shop_id:that.shop_id
							};
							that.$api.mtCheckCode2(param).then(res => {
								console.info("=====美团==扫码>>>"+JSON.stringify(res));
								if (res.code == 1) {
									that.hour = res.data.hour;
									that.init();
								} else {
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
							
						} else {
							that.douCode = that.code;
							let param = {
								code: that.douCode,
								shopId:that.shop_id
								
							};
							that.$api.douCheckCode2(param).then(res => {
								console.info("=====抖音/快手====扫码>>>"+JSON.stringify(res));
								if (res.code == 1) {
									if(res.data.type == 'ks'){
										that.hour = res.data.hour;
										that.ksCode = that.code;
									}else{
										that.hour = res.data.hour;
										that.douCode = that.code;
									}
									that.init();
								} else {
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
			
					},
					fail: function(res) {
			
						console.info(res);
					}
				});
			},

			firstBook() {
				this.$refs.confirmPopup.close()
				if (this.chargeList.length == 0) {

					this.addBook();
				} else {
					this.$refs.rechargePicker.open()
				}

			},

			clickChargeSelect(index) {
				if (index == this.selectChargeIndex) {
					this.selectChargeIndex = -1;
				} else {
					this.selectChargeIndex = index;

				}
				if (this.selectChargeIndex != -1) {
					this.chargeId = this.chargeList[index].id;

				} else {
					this.chargeId = "-1";
				}

				console.info("===chargeId===" + this.chargeId);
			},

			goBook() {

				if (this.chargeId == -1) {
					this.addBook();
				} else {
					this.doCharge();
				}
			},

			checkXuOrder() {
				
				let param = {};
				let that = this;
				var order_no = "";
				this.$api.checkOrderDoing(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

						if (res.data != -1) {
							order_no = res.data;
							uni.showModal({
								title: "订单提示",
								content: "您有订单正在进行中,是否需要续费",
								complete(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '../order/detail?order_no=' + order_no +
												"&is_xu=1"
										})
									}
								}
							})
						}

					}
				})
			},

			havePhone() {

				let param = {};
				let that = this;
				this.$api.haveMobile(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

						if (res.data == "") {
							uni.showModal({
								title: "提示",
								content: "为了给您提供更好的服务，请先完善手机号",
								confirmText: "完善",
								complete(res) {
									uni.navigateTo({
										url: '../member/updatePhone'
									})
								}
							})
						}

					} else {

					}
				})
			},
			
			doCharge() {
				let param = {
					charge_id: this.chargeId
				};
				let that = this;
				this.$api.charge(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

						that.chargeWechatPay(res.data.payInfo)

					} else {

					}
				})
			},
			
			chargeWechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
						that.addBook();
					},
					fail: function(err) {
						uni.showToast({
							title: "取消充值",
							icon: 'none'
						});
					}
				});
			},

			getCharge() {

				let param = {
					shop_id: this.shop_id
				};
				let that = this;
				this.$api.getChargeInfo(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.chargeList = res.data.chargeList;

						that.chargeList.map(item => {
							item.check = false
						})
						console.info("===chargeList=====" + JSON.stringify(that.chargeList));
						if(that.chargeList.length >0){
							that.$refs.chargePop.open();
						}
					} else {

					}
				})
			},

			pickSelect(e) {
				console.log(e.detail.value)
				var hour = e.detail.value[0];
				var time = e.detail.value[1];
				var tmp = hour + 1;

				if (time == 1) {
					tmp = hour + 1.5;
				}
				if (tmp < this.data.hours[0]) {
					uni.showToast({
						title: "最低起订" + this.data.hours[0] + "小时",
						icon: 'error'
					})
					return;

				}
				this.hour = tmp;
				this.tempHour = this.hour;

				this.init();


			},

			clickUseCoupon(item) {

				this.$refs.couponPicker.close();
				if (item == null) {
					this.tuanId = -1;
				} else {
					this.tuanId = item.id;
					this.selectTuanName = item.tuan.name;
				}
				//this.init();
			},

			clickUseCoupon2(item) {

				this.$refs.yhPicker.close();
				if (item == null) {
					this.discount_id = -1;
				} else {
					this.discount_id = item.id;
					this.discount_name = item.name;
				}
				console.info(this.discount_id+"=====22333====="+this.discount_name);
				this.init();
			},

			showTuan() {
				this.$refs.couponPicker.open();
			},
			
			showCoupon() {
				this.$refs.yhPicker.open();
			},

			article() {
				uni.navigateTo({
					url: '../member/article?name=' + '如何预约'
				})
			},

			charge() {
				uni.setStorageSync("shopId", this.shop_id);
				uni.setStorageSync("tabIndex", 0);

				uni.switchTab({
					url: '../discount/index'
				})
			},

			bindTimeChange(e) {
				this.startTime = e.detail.value;
				this.data.startTime = this.startTime;
				this.init();
			},

			//选择套餐
			doSetSelect(index) {
				this.selectSetIndex = index;
				this.hour = this.data.set[index].hour;
				this.setId = this.data.set[index].id;
				this.yhSelectSetIndex = -1;
				this.init();
			},
			
			doSetSelect2(index){
				var start = this.data.yh_set[index].time;
				var end = this.data.yh_set[index].end_time;
				let that = this;
				uni.showModal({
					title:"提示",
					content:"此套餐是优惠套餐,使用时间段是："+start+"~"+end,
					complete(res) {
						if(res.confirm == true){
							that.yhSelectSetIndex = index;
							that.setId = that.data.yh_set[index].id;
							that.hour = that.data.yh_set[index].hour;
							// that.startTime = start;
							that.data.startTime = that.startTime;
							that.selectSetIndex = -1;
							that.init();
						}
					}
				})				
			},
			
			//选择小时间
			doSelectHour(index) {

				this.selectHourIndex = index;
				if (index != -1) {
					this.hour = this.data.hours[index];
					this.tempHour = this.hour;
					this.init();
				}

			},
			
			//选择日期
			doSelectDate(item) {

				for (var i = 0; i < this.data.date.length; i++) {
					this.data.date[i].selected = false;
				}
				item.selected = true;
				this.date = item.dateValue;
				
				this.init();
			},

			init() {
				let param = {
					id: this.id,
					date: this.date,
					hour: this.hour,
					startTime: this.startTime,
					type: this.currentTab,
					tuanId: this.tuanId,
					mtCode: this.mtCode,
					douCode: this.douCode,
					ksCode: this.ksCode,
					couponId: this.couponId,
					setId:this.setId,
					discountId:this.discount_id
				};
				let that = this;
				this.$api.orderInit(param).then(res => {
					
					if (res.code == 1) {
			
						that.data = res.data;
						that.startTime = res.data.startTime;
						that.tuanList = res.data.tuanList;
						that.couponList = res.data.couponList;
						
			
						if (that.data.set.length > 0 && that.yhSelectSetIndex == -1) {
			
							for (var i = 0; i < that.data.set.length; i++) {
								if (that.data.set[i].hour == that.hour) {
									this.selectSetIndex = i;
									this.isFirst = false;
									break;
								}
							}
			
							if (this.isFirst == true) {
								this.currentTab = 1;
								this.selectSetIndex = 0;
								this.selectSetIndex = this.selectSetIndex;
								this.hour = this.data.set[this.selectSetIndex].hour;
								this.setId = this.data.set[this.selectSetIndex].id;
							}
						}
				
						if (that.hour == -1) {
							this.hour = this.data.hours[0];
							this.tempHour = this.hour;
							this.selectHourIndex = 0;
						} else {
							if (this.currentTab == 1) {
								if (this.data.set.length > 0 && this.selectSetIndex != -1) {
									this.selectSetIndex = this.selectSetIndex;
									this.hour = this.data.set[this.selectSetIndex].hour;
									this.setId = this.data.set[this.selectSetIndex].id;
									
								} else {
			
								}
							} else {
								this.hour = this.tempHour;
								this.setId = -1;
							}
						}
			
						that.isFirst = false;
			
			
						this.init2();
						if (res.msg != '') {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					} else {
			
					}
				})
			
			},
			
			init2() {
				let param = {
					id: this.id,
					date: this.date,
					hour: this.hour,
					startTime: this.startTime,
					type: this.currentTab,
					tuanId: this.tuanId,
					mtCode: this.mtCode,
					douCode: this.douCode,
					couponId: this.couponId,
					setId:this.setId,
					discountId:this.discount_id
			
				};
				console.info("==param==" + JSON.stringify(param))
				let that = this;
				this.$api.orderInit(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.data = res.data;
			
			
						if (this.date == "") {
							this.data.date[0].selected = true;
							this.date = this.data.date[0].dateValue;
						}
						this.date = res.data.selectDate;
						that.discount = res.data.discount;
						console.info(res.data.selectDate+"====selectDate======"+this.date);
						that.checkOrderTime();
						that.startTime = res.data.startTime;
						console.info("====orderInit=2 time===" + that.startTime)
						that.tuanList = res.data.tuanList;
						that.couponList = res.data.couponList;
						
						if (res.msg != '') {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					} else {
			
					}
				})
			
			},

			checkOrderFreeTime() {
				let param = {
					id: this.param.id,
					hour: this.hour,
				};
				let that = this;
				this.$api.checkOrderTip(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

						var date = res.data.date;
						var startTime = res.data.startTime;
						uni.showModal({
							title: "时间段占用提示",
							content: "此时间段已被预定，可预定" + res.data.date + " " + res.data.startTime + " ~ " +
								res.data.endTime,
							confirmText: "预定",
							complete(res) {
								if (res.confirm) {
									that.startDate = date;
									that.date = date;
									that.startTime = startTime;
									that.init2();
								}
							}
						})
						// that.startDate = res.data.date;
						// that.startTime = res.data.startTime
						// that.orderInit();
					} else {

					}
				})
			},

			checkOrderTime() {
				let param = {
					date: this.date,
					room_id: this.id,
					hour: this.hour,
					starTime: this.startTime
				};
				let that = this;
				this.$api.checkOrderBookTime(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.oneTimeList = res.data.list;
						that.oneDate = res.data.date;
						that.twoDate = res.data.date2;
						that.twoTimeList = res.data.list2;

					} else {

					}
				})
			},

			restore() {
				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.restore(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},

			addBook() {

				let param = {

					id: this.id,
					date: this.date,
					hour: this.hour,
					startTime: this.startTime,
					setId: this.setId,
					tuanId: this.tuanId,
					mtCode: this.mtCode,
					douCode: this.douCode,
					couponId: this.couponId,
					discountId: this.discount_id,
					mobile:this.mobile

				};

				if (this.isPaying == true) return;
				this.isPaying = true;
				let that = this;
				this.$api.addBookOrder(param).then(res => {
					console.info(JSON.stringify(res));
					that.isPaying = false;
					if (res.code == 1) {
						that.order_no = res.data.order_no;
						uni.redirectTo({
							url: '/other/order/detail?order_no=' + that.order_no
						})

					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},

			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {

						uni.redirectTo({
							url: '../order/detail?order_no=' + that.order_no
						})

					},
					fail: function(err) {
						that.restore();
						uni.showToast({
							title: "取消预定",
							icon: 'none'
						});
					}
				});
			},
			
			switchTab(d) {
				this.currentTab = d;
				this.selectSetIndex = 0;
				console.info("===d==" + d);
				if (this.currentTab == 0) {
					this.setId = -1;
					this.hour = this.tempHour;
				}
				this.init();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		position: relative;
		.cfd2 {
			display: flex;
		}
		.listbox {
			.item {
				width: calc(50% - 16rpx);

				&.active {
					background: #F6BEC8;
					color: #fff;

					.c3d3 {
						color: #fff;
					}

					.cfd {
						color: #E0246E;
					}
					
				}
			}
		}

		.cover {
			margin-top: -50rpx;
			position: absolute;
			z-index: 99;
			width: 100%;

			image {
				width: 120rpx;
				height: 120rpx;
				border: 8rpx solid #fff;
			}

			.close {
				position: absolute;
				right: 32rpx;
				top: 70rpx;
				width: 70rpx;
				height: 70rpx;
				line-height: 64rpx;
				border-radius: 50%;
				background-color: #e4e1e1;
				color: #fff;
			}
		}

		.confirmPopup {
			.poster {
				width: 170rpx;
				height: 170rpx;
			}

			.btns {
				.cancelbtn {
					width: 240rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2rpx solid #C3C3C3;
					color: #C3C3C3;
					background-color: #fff;
					box-sizing: border-box;
				}

				.confirmbtn {
					width: 240rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2rpx solid #ff0000;
					background-color: #ff0000;
					box-sizing: border-box;
				}
			}
		}

		.rechargePopup {
			border-radius: 16rpx;

			.bgf6c {
				color: #333;
			}

			.cont {
				.item {
					position: relative;
					width: 218rpx;
					background-color: #FFF9DB;

					.bgff4 {
						background-color: #FF4949;
						color: #fff;
					}

					.radio {
						position: absolute;
						top: 0;
						right: 0;

						image {
							position: absolute;
							top: 10rpx;
							right: 18rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}

		.status {
			color: #7F7E8A;
			background-color: #EAEAEA;
		}

		.bgc3 {
			background-color: #E1E1E1;
		}
		
		.hour_w {
			width: calc(100% / 24);
			height: 20rpx;
			margin-right: 2rpx;
			position: relative;
			&.lines2 {
				&:after {
					content: '';
					width: 50%;
					height: 100%;
					border-radius: 4rpx 0 0 4rpx;
					background-color: #E0246E;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			&.lines {
				&:after {
					content: '';
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
					background-color: #FD89B6;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			&.lines3 {
				&:after {
					content: '';
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
					background-color: #E0246E;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

		.hours {
			width: 100%;
			position: relative;

			text {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.w12 {
			width: 24rpx;
			height: 24rpx;
			
		}

		.dinline {
			display: inline-block;
		}

		.bg26 {
			background-color: #FD89B6;
		}

		.bgf6c {
			background-color: #FD89B6;
		}

		.bgf0 {
			background-color: #F0F3FD;
		}

		.progress {
			width: 100%;

			text {
				width: 24rpx;
				height: 24rpx;

				&.bg26 {
					background-color: #4598D9;
					border: none;
				}

				.bgf6c {
					background-color: #4598D9;
				}
			}
		}

		.list {
			height: calc(100vh - 152rpx);
			position: relative;

			// &::before {
			// 	content: '';
			// 	width: 100%;
			// 	height: 380rpx;
			// 	background: linear-gradient(to bottom, #4598D9, #4598D9);
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	z-index: 0;
			// }

			.btn {
				color: #333;
			}
		}


		.popup2 {
			position: relative;

			.cover {
				width: 668rpx;
				height: 576rpx;
				position: absolute;
				top: -48rpx;
				left: calc(50% - 334rpx);
			}

			.bg {
				width: 568rpx;
				height: 780rpx;
				z-index: 1; /* 背景应该在底层 */
				
			}

			.close {
				width: 60rpx;
				height: 62rpx;
				line-height: 44rpx;
				border: 4rpx solid #fff;
				display: inline-block;
			}
			
		
			.cont {
				width: 568rpx;
				height: 680rpx;
				position: absolute;
				top: 0;
				z-index: 2; /* 内容应该在顶层 */
				
				left: calc(50% - 284rpx);
				color: #FD89B6;

				.title {
					color: #FD89B6;
				}
				
				.listPop {
					height: 480rpx;
					z-index: 99;
					.item {
						width: 460rpx;
						border: 2rpx solid #F4B5D0;
						color: #FD89B6;
					}
				}

				.btn {
					button {
						background-color: #FD89B6;
						width: 280rpx;
						height: 56rpx;
						
						line-height: 56rpx;
						color: #D22D80;
					}
				}
			}
		}


		.right1 {
			position: relative;
			height: 250rpx;
		}

		.right2 {
			position: relative;
			width: 300rpx;
			height: 250rpx;

			.logo {
				position: absolute;
				top: 50rpx;
				right: 14rpx;
				width: 148rpx;
				height: 152rpx;
			}

			.cont {
				.icon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.bottom2 {
				bottom: 10rpx;
				position: absolute;
				left: 0rpx;

			}
		}

		.box {
			position: relative;
			z-index: 1;
		}

		.img {
			width: 204rpx;
			height: 292rpx;
		}

		// .ellipsis1 {max-width: 44vw;}
		.borff0 {
			border: 2rpx solid #ff0000;
		}

		.w5 {
			width: 12rpx;
			height: 12rpx;
		}

		.w8 {
			width: 24rpx;
			height: 24rpx;
		}

		.w30 {
			width: 60rpx;
			height: 60rpx;
		}

		.room {
			overflow: hidden;

			.tabs {
				>view {
					height: 68rpx;
				}

				.active {
					background: #F6BEC8;
					color: #fff;
				}
			}

			.nowrap {
				white-space: nowrap;
			}

			.w40 {
				width: 80rpx;
				display: inline-block;
				border: 2rpx solid #F6BEC8;

				&.active {
					background: #F6BEC8;
					color: #FFF;
				}
			}

			.w15 {
				width: 30rpx;
				height: 30rpx;
			}

			.w12 {
				width: 24rpx;
				height: 24rpx;
			}

			.w100 {
				&.active {
					background: #F6BEC8;
					color: #FFF;
				}
			}

			.w-25 {
				width: calc(25% - 12rpx);
			}

			.w20 {
				width: 40rpx;
				height: 40rpx;
			}

			.bgac {
				background-color: #F6BEC8;
				color: #FFF
			}

			.bortd {
				border-top: 4rpx dashed #DDD
			}
		}

		.fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			box-sizing: border-box;
			overflow: hidden;

			.content {
				height: 90rpx;
				box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, .1);
				border-radius: 80rpx;
			}

			.btn1 {
				height: 90rpx;
				line-height: 40rpx;
				background-color: #F6BEC8;
			}

			.btn {
				height: 90rpx;
				border-radius: 0 80rpx 80rpx 0;
				line-height: 90rpx;
				background-color: #FD89B6;
				color: #fff;
			}
		}
	}
</style>